<template>
<div>
    <div>
      <button @click="componentName='One'">One</button>
      <button @click="componentName='Two'">Two</button>
      <button @click="componentName='Three'">Three</button>
      
    </div>
    <keep-alive include="One,Two">
      <component :is="componentName"></component>
    </keep-alive>
    <router-view></router-view>
</div>
  
</template>

<script>
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
export default {
  name:"App",
  components:{
    One,
    Two,
    Three
  },
  data(){
    return {
      componentName:"One",
    }
  }
}
</script>

<style>

</style>